import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, Space, Table, Typography, Input} from "antd";
import { useNavigate } from 'react-router-dom';
import Json2Excel from '@/utils/Json2Excel.js'
import TheImage from "@/components/TheImage/index.jsx";
import TheUpload from "@/components/TheUpload/index.jsx";
import TheButton from "@/components/TheButton/index.jsx";
import TheQuill from "@/components/TheQuill/index.jsx";
import {Decimal} from 'decimal.js';
import {ProForm, ProFormTextArea, ProFormUploadButton} from "@ant-design/pro-components";

const { Text,Paragraph } = Typography;
const { TextArea } = Input;

const Home = () => {
    const form = useRef();
    const navigate = useNavigate();
    const [text,setText] = useState();
    const goAdd = () => {
        navigate('/demo/add',{
            state: {
                st: "test"
            }
        })
    }
    const exports = () => {
        const option = {
            fileName: '期末库存表',
            header: [
                {
                    prop: '',
                    title: '期末库存表',
                    children: [
                        {
                            prop: "",
                            title: '',
                            children: [
                                {
                                    prop: "index",
                                    title: "编码",
                                },
                                {
                                    prop: "stockSpuSkuName",
                                    title: "物料SKU名称",
                                    valueType: 's'
                                },
                            ]
                        },
                        {
                            prop: "",
                            title: "合计",
                            children: [
                                {
                                    prop: "allPrice",
                                    title: "库存成本",
                                    valueType: 'n',
                                },
                                {
                                    prop: "avgPrice",
                                    title: "库存均价",
                                    valueType: 'n',
                                },
                            ]
                        }
                    ]
                },
            ],
            dataSource: []
        }
        Json2Excel(option)
    }
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ];

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];
    const pageChange = (pageNo, pageSize) => {
        // console.log(pageNo, pageSize)
    }

    const onFinish = (values) => {
        // console.log('Received values of form: ', values);
    }
    const setNewsContent = (data) => {
        // console.log("富文本编辑数据：",data)
    }
    useEffect(()=>{
        setTimeout(()=>{
            form.current.setFieldsValue(
                {
                    images: "https://hqmimage.oss-cn-beijing.aliyuncs.com/3a296767ed3a4e3bbcc210654b4696a8.jpg,https://hqmimage.oss-cn-beijing.aliyuncs.com/821c24dfc5a14fc2ba2839f4d25197cf.jpg",
                    upload: [
                        {
                            uid: `-1`,
                            name: '123.jpg',
                            status: 'done',
                            url: 'https://hqmimage.oss-cn-beijing.aliyuncs.com/3a296767ed3a4e3bbcc210654b4696a8.jpg',
                        }
                    ]
                }
            )
        },2000)

        let a = new Decimal(26.89).mul(100).toNumber()
        // console.log(a)
        setText('123')
    },[])
    return (
        <div className={'wrap-box wrap-box-content'}>
            <Space size={50}>
                <Paragraph>
                    <blockquote>路由跳转示例</blockquote>
                    <Button onClick={()=>goAdd()}>添加</Button>
                </Paragraph>
                <Paragraph>
                    <blockquote>导出数据示例</blockquote>
                    <Button onClick={()=>exports()}>导出</Button>
                </Paragraph>
                <Paragraph>
                    <blockquote>权限按钮</blockquote>
                    <TheButton
                        haspermi={['camera:allot:edit']}
                    >
                        测试
                    </TheButton>
                </Paragraph>
            </Space>
            <Paragraph>
                <blockquote>数值转换</blockquote>

            </Paragraph>
            <Space>
                <Space direction={'vertical'}>
                    <Text>加法： 0.1 + 0.2 = {Decimal(0.1).add(Decimal(0.2)).toNumber()}</Text>
                    <Text code>Decimal(x).add(Decimal(y))</Text>
                </Space>
                <Space direction={'vertical'}>
                    <Text>减法： 8.6 - 1.5 = {Decimal(8.6).sub(Decimal(1.5)).toNumber()}</Text>
                    <Text code>Decimal(a).sub(Decimal(b)) </Text>
                </Space>
                <Space direction={'vertical'}>
                    <Text>乘法： 26.89 * 100 = {Decimal(26.89).mul(100).toNumber()}</Text>
                    <Text code>Decimal(a).mul(Decimal(b))</Text>
                </Space>
                <Space direction={'vertical'}>
                    <Text>除法： 5889 / 100 = {Decimal(5889).div(Decimal(100)).toNumber()}</Text>
                    <Text code>Decimal(a).div(Decimal(b))</Text>
                </Space>
            </Space>
            <Paragraph>
                <blockquote>图片预览示例</blockquote>
            </Paragraph>
            <TheImage
                width={80}
                height={80}
                src={[
                    'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
                    'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
                    'https://hqmimage.oss-cn-beijing.aliyuncs.com/fd161487217e4c92a3365b1cdd002d07.mp4',
                ]}
            />
            <Paragraph>
                <blockquote>表格示例</blockquote>
            </Paragraph>
            <Table
                dataSource={dataSource}
                columns={columns}
                pagination={{
                    position: ['bottomCenter'],
                    current: 1,
                    pageSize: 10,
                    total: 150,
                    onChange: pageChange,
                    showSizeChanger: false
                }}
            />
            <Paragraph>
                <blockquote>表单上传组件示例</blockquote>
            </Paragraph>
            <ProForm
                formRef={form}
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <TheUpload
                    label="测试上传"
                    name="images"
                    // required={true}
                    len={3}
                    // disabled={true}
                    // extra={null}
                />
                <ProFormTextArea
                    name="text"
                    label="名称"
                    placeholder="请输入名称"
                    fieldProps={{
                        maxLength: 50,
                        showCount: true
                    }}
                />

            </ProForm>
            <Form.Item label="TextArea">
                <TextArea rows={4} maxlength={10} maxLength={10} showCount/>
            </Form.Item>
            <Paragraph>
                <blockquote>富文本编辑器示例</blockquote>
            </Paragraph>
            <TheQuill height={400} defaultValue={text} setNewsContent={setNewsContent}/>
        </div>
    )
};
export default Home;
